/*
 * @Descriptions: reactApp
 * @version: 1.0
 * @Author: CQY
 * @Date: 2022-03-30 09:45:08
 * @LastEditors: CQY
 * @LastEditTime: 2022-04-08 16:20:11
 */
import React,{ useState } from 'react';
import { Table, Button,Space,ConfigProvider  } from 'antd';

import { DeleteTwoTone } from '@ant-design/icons';
// 引入国际化 默认中文文案
import zhCN from 'antd/lib/locale/zh_CN';

import PurchaseModal from '../../components/goods/purchase/PurchaseModal';

  
  // const rowSelection = {
    // onChange: (selectedRowKeys, selectedRows) => {
    //   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    // },

    // 多选框按钮 功能函数
    // getCheckboxProps: (record) => ({
    //   disabled: record.name === 'Disabled User',
    //   // Column configuration not to be checked
    //   name: record.name,
    // }),
  // };

  
const PurchaseManage = () => {

  // table渲染表头 列数据
const columns = [
  {
    title: '商品名称',
    dataIndex: 'name',
    // render: (text) => <a>{text}</a>
    align:'center',
  },
  {
    title: '原有库存',
    dataIndex: 'number',
    align:'center',
  },
  {
    title: '采购数量',
    dataIndex: 'address',
    align:'center',
  },
  {
      title: '存放仓库',
      dataIndex: 'have',
      align:'center',
    },
  {
    title: '供应商',
    dataIndex: 'provider',
    align:'center',
  },
  {
      title: '单价',
      dataIndex: 'price',
      align:'center',
  },
  {
      title: '总折扣',
      dataIndex: 'TotalDiscount',
      align:'center',
  },
  {
      title: '总成本',
      dataIndex: 'TotalCost',
      align:'center',
  },
  {
      title: '总运费',
      dataIndex: 'TotalShipping',
      align:'center',
  },
  {
      title: '支付方式',
      dataIndex: 'payMode',
      align:'center',
  },
  {
      title: '备注',
      dataIndex: 'remark',
      align:'center',
  },
  {
      title: '经办人',
      dataIndex: 'Manager',
      align:'center',
  },
  {
      title: '信息录入',
      dataIndex: 'message',
      align:'center',
  },
  {
      title: '采购日期',
      dataIndex: 'purchaseDate',
      align:'center',
  },
  {
      title: '管理',
      dataIndex: 'management',
      render: (text,category)=><Space>
      <DeleteTwoTone twoToneColor="#C00000" style={{cursor:"pointer"}} onClick={()=>handlerDelete(category)} />
      </Space>,
      align:'center',
  }
];
// table渲染表头 行数据
const data = [
  {
    key: '1',
    name: 'phone',
    number: 32,
    address: 50,
    have:40,
    provider:'king',
    price:32,
    TotalDiscount:'7.8',
    TotalCost:4500,
    TotalShipping:500,
    payMode:'bankCard',
    remark:'coco',
    Manager:'smith',
    message:'join me',
    purchaseDate:'2022-2-3',
  },
  {
    key: '2',
    name: 'telephone',
    number: 32,
    address: 50,
    have:40,
    provider:'king',
    price:32,
    TotalDiscount:'7.8',
    TotalCost:4500,
    TotalShipping:500,
    payMode:'bankCard',
    remark:'coco',
    Manager:'smith',
    message:'join me',
    purchaseDate:'2022-2-3',
    management:'null'
  },
  {
    key: '3',
    name: 'telephone',
    number: 32,
    address: 50,
    have:40,
    provider:'king',
    price:32,
    TotalDiscount:'7.8',
    TotalCost:4500,
    TotalShipping:500,
    payMode:'bankCard',
    remark:'coco',
    Manager:'smith',
    message:'join me',
    purchaseDate:'2022-2-3',
    management:'null'
  },
  {
    key: '4',
    name: 'telephone',
    number: 32,
    address: 50,
    have:40,
    provider:'king',
    price:32,
    TotalDiscount:'7.8',
    TotalCost:4500,
    TotalShipping:500,
    payMode:'bankCard',
    remark:'coco',
    Manager:'smith',
    message:'join me',
    purchaseDate:'2022-2-3',
    management:'null'
  },
  {
    key: '5',
    name: 'telephone',
    number: 32,
    address: 50,
    have:40,
    provider:'king',
    price:32,
    TotalDiscount:'7.8',
    TotalCost:4500,
    TotalShipping:500,
    payMode:'bankCard',
    remark:'coco',
    Manager:'smith',
    message:'join me',
    purchaseDate:'2022-2-3',
    management:'null'
  },
  {
    key: '6',
    name: 'telephone',
    number: 32,
    address: 50,
    have:40,
    provider:'king',
    price:32,
    TotalDiscount:'7.8',
    TotalCost:4500,
    TotalShipping:500,
    payMode:'bankCard',
    remark:'coco',
    Manager:'smith',
    message:'join me',
    purchaseDate:'2022-2-3',
    management:'null'
  },
  
]; // rowSelection object indicates the need for row selection


// 点击删除按钮的 事件处理函数
const handlerDelete = (category) =>{
  console.log(category);
}

// 控制新增采购 模态框显示隐藏的数据 和 函数

const [isModalVisible, setIsModalVisible] = useState(false);

const handleOk = () => {
  setIsModalVisible(false);
};

const handleCancel = () => {
  setIsModalVisible(false);
};

// 点击新增采购按钮 事件处理函数
const handlerShowModal = () =>{
  setIsModalVisible(true)
}


  return (

  <ConfigProvider locale={zhCN}>
    {/* 新增采购模态框 */}
    <PurchaseModal title='采购入库' visible={isModalVisible} handleOk={handleOk} onCancel={handleCancel} />
    {/* 表头管理按钮 */}
      <div style={{textAlign:"center",height:"44px",lineHeight:"44px"}}>
            <Space>
                <Button type="danger">采购记录</Button>
                <Button type="primary" onClick={()=>handlerShowModal()}>新增采购</Button>
            </Space>
        </div>
    {/* 表单部分主体 */}
        <Table
          bordered
          // rowSelection={{
          //   // type: "checkbox",
          //   // ...rowSelection,
          // }}
          columns={columns}
          dataSource={data}
          pagination={
            {
              // position:['bottomCenter'],
              total:data.length,
              showSizeChanger:true,
              showQuickJumper:true,
              defaultPageSize:5,
              pageSizeOptions:[5,10],
              showLessItems:true,
              responsive:true,
              showTotal:total => `总共 ${total} 条`
            }
          }
        />
  </ConfigProvider>

  );
};


export default PurchaseManage;
